<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 信息
                </el-breadcrumb-item>
                <el-breadcrumb-item>个人信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form  ref="form" :rules="rules" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="form.nickname" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="form.sex" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="手机" readonly>
                        <el-input v-model="form.phone" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import{getAdmin,savePassword} from "@/api/user.js";
export default {
    name: 'info',
    data() {
        return {
            form: {
                username: '',
                nickname: '',
                phone:undefined,
                password:'',
                gender:null,
                sex:''
            },

            //校验规则
            rules:{
                 password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
            },

        };
    },
    created() {
        this.getData();
    },

    methods: {

        getData(){
            let userInfo = localStorage.getItem("userInfo");
            let user = JSON.parse(userInfo);
            const userId = user.userId;
            console.log(userId);
            getAdmin(userId).then(res=>{
                this.form = res.data;
                this.form.password = '';
            })

        },
        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                    if (valid) {
                        const password = this.form.password;
                        const userId = this.form.userId;
                        savePassword(userId,password).then(res=>{
                            this.$message.success(res.message);
                        })
                    } else {
                        return false;
                    }
            });
        }
        }
};
</script>